<template>
	<el-dialog v-model="dialogVisible" title="协议详情" width="1030" align-center>
		<h1 style="text-align: center;">
			{{ detail.gradeName }}
		</h1>
		<div class="update-time">
			更新于{{ formatTime(detail.updateTime ? detail.updateTime : detail.createTime) }}
		</div>
		<div class="protocol" v-html="detail.protocol"></div>
		<template #footer>
			<el-button @click="dialogVisible = false">取消</el-button>
		</template>
	</el-dialog>
</template>
  
<script lang="ts" setup>
import { reactive, watch } from 'vue'
import { tool } from '@renderer/utils/tool'
import { getGradeGetApi } from '@renderer/api/grade';

/* 父组件传参 */
const props = defineProps<{
	id: string
}>()
const dialogVisible = defineModel({ default: false })

let detail = reactive({
	gradeName: '',
	protocol: '',
	createTime: 0,
	updateTime: 0,
})

const getGradeGetData = async () => {
	let res = await getGradeGetApi(props.id);
	Object.assign(detail, res.data);
}

//时间戳转换为标准时间
const formatTime = (value: number) => {
	return tool.dateFormat(value);
}

watch(dialogVisible, () => {
	if (dialogVisible.value) {
		getGradeGetData()
	}
})

</script>

<style>
.update-time {
	text-align: center;
	font-size: 12px;
	line-height: 30px;
}

.protocol {
	overflow: scroll;
}

.protocol img {
	font-size: 14px;
	line-height: 20px;
	max-width: 100% !important;
}
</style> 